<template>
  <view class="activity-container">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="title">活动列表</text>
    </view>
    
    <view class="activity-list">
      <block v-if="activities.length > 0">
        <view 
          v-for="activity in activities" 
          :key="activity.id" 
          :class="['activity-card', isNewActivity(activity.time) ? 'new-activity' : '']"
          @tap="goToDetail(activity.id)"
        >
          <view class="card-header">
            <text class="activity-title">{{ activity.title }}</text>
          </view>
          <view class="card-footer">
            <text class="activity-time">{{ formatTime(activity.time) }}</text>
          </view>
        </view>
      </block>
      <view v-else class="empty-tip">
        <text>暂无活动信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activities: []
    }
  },
  onLoad() {
    this.fetchActivities()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    fetchActivities() {
      uni.request({
        url: 'http://localhost:8080/cc/activity/lists',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.rows) {
            // 按照时间倒序排列
            this.activities = res.data.rows.sort((a, b) => {
              const timeA = a.time ? new Date(a.time).getTime() : 0
              const timeB = b.time ? new Date(b.time).getTime() : 0
              return timeB - timeA
            })
          }
        },
        fail: (err) => {
          console.error('获取活动列表失败:', err)
          uni.showToast({
            title: '获取活动列表失败',
            icon: 'none'
          })
        }
      })
    },
    formatTime(time) {
      if (!time) return ''
      // 处理时间格式，确保显示正确
      return time
    },
    isNewActivity(time) {
      if (!time) return false
      const activityDate = new Date(time)
      const now = new Date()
      // 判断是否为7天内的活动
      const diffTime = Math.abs(now - activityDate)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return diffDays <= 7
    },
    goToDetail(id) {
      uni.navigateTo({
        url: '/pages/activity-detail/activity-detail?id=' + id
      })
    }
  }
}
</script>

<style scoped>
.activity-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.back-btn {
  padding: 20rpx;
}

.back-icon {
  font-size: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 24rpx;
  border-left: 12rpx solid #4CAF50;
  position: relative;
  overflow: hidden;
}

.activity-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.1), transparent);
  border-radius: 0 0 0 120rpx;
}

.activity-card:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.activity-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
}

.activity-time {
  font-size: 28rpx;
  color: #7f8c8d;
  background-color: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.new-activity {
  border-left-color: #ff6b6b;
}

.new-activity::before {
  content: 'NEW';
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #ff6b6b;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: bold;
}

.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999999;
  font-size: 32rpx;
}
</style>